<template>
  <div class="top-area">
    <div class="time">
      <div class="day">{{ time }}</div>
      <div class="min">{{ min }}</div>
    </div>
    <div class="title">智慧城市-武汉</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const time = ref(null)
const min = ref(null)
setInterval(() => {
  const date = new Date()
  time.value = `${date.getFullYear()}-${addZero(date.getMonth() + 1)}-${addZero(date.getDate())}`
  min.value = `${addZero(date.getHours())}:${addZero(date.getMinutes())}:${addZero(date.getSeconds())}`
}, 1000)
function addZero(time) {
  if (time < 10 && time >= 0) {
    return '0' + time
  } else {
    return time
  }
}
</script>


<style scoped lang="scss">
.top-area {
  position: fixed;
  z-index: 10;
  top: 0;
  color: #fff;
  background-image: url('../assets/images/header.png');
  background-size: cover;
  background-position: center center;
  display: flex;
  width: 100vw;
  height: 70px;
  padding: 10px;

  .time {
    position: relative;
    width: 30%;
    top: 10px;
    left: 20px;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
  }

  .title {
    position: relative;
    left: 14%;
    width: 70%;
    font-size: 25px;
  }
}
</style>